<template>
    <el-form ref="formRef" :model="form" label-width="100px">
        <el-form-item label="缩略图" prop="thumb">
            <el-upload class="avatar-uploader" drag :action=url :show-file-list="false"
                       :on-success="handleAvatarSuccess">
                <img v-if="thumb" :src="thumb" class="avatar"/>
                <el-icon v-else class="avatar-uploader-icon">
                    <Plus/>
                </el-icon>
            </el-upload>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="头衔" prop="title">
            <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="des">
            <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="传真" prop="des">
            <el-input v-model="form.fax"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="des">
            <el-input v-model="form.email"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="saveEdit(formRef)">保 存</el-button>
        </el-form-item>
    </el-form>
</template>

<script lang="ts" setup>
    import {ElMessage, FormInstance, FormRules, UploadProps} from 'element-plus';
    import {ref} from 'vue';
    import base from '../utils/base';
    import pressContact from '../api/pressContact'

    const props = defineProps({
        data: {
            type: Object,
            required: true
        },
        edit: {
            type: Boolean,
            required: false
        },
        update: {
            type: Function,
            required: true
        }

    });

    const url = `${base.rq}/file/upload?token=${localStorage.getItem("token")}`

    const defaultData = {
        title: '',
        name: '',
        phone: '',
        fax: '',
        email: '',
        thumbnailUrl: '',
    };

    const thumb = props.edit ? ref(props.data.thumbnailUrl) : ref('');

    const form = ref({...(props.edit ? props.data : defaultData)});

    const formRef = ref<FormInstance>();
    const saveEdit = (formEl: FormInstance | undefined) => {
        if (!formEl) return;
        // formEl.validate(valid => {
        // 	if (!valid) return false;
        // 	props.update(form.value);
        // 	ElMessage.success('保存成功！');
        // });
        commit();
    };

    const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
        // form.value.thumb = URL.createObjectURL(uploadFile.raw!);
        console.log(response)
        if (form.value.title === "") {
            form.value.title = response.data.filename;
        }
        form.value.thumbnailUrl = response.data.realName;
        thumb.value = response.data.tmpUrl;
    };

    const handleImageSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
        // form.value.thumb = URL.createObjectURL(uploadFile.raw!);
        if (form.value.title === "") {
            form.value.title = response.data.filename;
        }
    };

    const commit = () => {
        pressContact.save(
            form.value,
            (res) => {
                if (res.code === 200) {
                    console.log(res)
                    ElMessage.success('保存成功！');
                    props.update();
                } else {
                    ElMessage.success('保存失败！');
                    props.update();
                }
            }
        );
    }

</script>

<style>
    .avatar-uploader .el-upload {
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--el-transition-duration-fast);
    }

    .avatar-uploader .el-upload:hover {
        border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        text-align: center;
    }

    .video {
        margin-top: 10px;
        width: 100%;
    }

    .avatar {
        width: 300px
    }
</style>
